<template>
	<view class="title">
		<text class="footer iconfont icon-xiangzuo1" @click="back"></text>
	</view>
	<view class="content">
		<ren-calendar ref='ren' 
		:markDays='markDays' 
		:headerBar='true' 
		@onDayClick='onDayClick'></ren-calendar>
	</view>
	<view class="guize">
		<text class="time">打卡规则：固定上下班 09:00-12:00 13:30-18:00</text>
		<view class="shangban">
			<view class="daka"></view>
			<view>
				<view>
					<text>上班打卡</text>
					<button plain='true' class="btn1" v-show="data.chidaoShow">迟到</button>
				</view>
				<text>{{data.shangban}}</text>
			</view>
			<button plain='true' class="btn2" v-show="data.chidaoShow">处理异常</button>
		</view><view class="xiaban">
			<view class="daka"></view>
			<view>
				<view>
					<text>下班打卡</text>
					<button plain='true' class="btn1" v-show="data.zaotuiShow">早退</button>
				</view>
				<text>{{data.xiaban}}</text>
			</view>
			<button plain='true' class="btn2" v-show="data.zaotuiShow">处理异常</button>
		</view>
		<!-- <view class="xiaban">
			<view  class="daka"></view>
			下班打卡
		</view> -->
	</view>
	<view class="tongji">
		<text class="footer">本月考勤统计</text>
		<text class="footer iconfont icon-xiangyou1" @click="kaoqintongji"></text>
		<view class="type">
			<view>
			<text>加班（时）</text>
			<text>{{data.jiaban}}</text>
			</view>
			<view>
			<text>迟到（次）</text>
			<text>{{data.chidao}}</text>
			</view>
			<view>
			<text>旷工（天）</text>
			<text>{{data.kuanggong}}</text>
			</view>
		</view>
	</view>
</template>
 <script>
 import {ref,computed,reactive,toRefs} from 'vue';
 import RenCalendar from'../../components/ren-calendar/ren-calendar.vue';
 import http from '../../utils/http.js';
 import store from '../../store/index.js';
	export default{
	components:{RenCalendar},
	 setup(){
	 let data=reactive({
		 curDate:'',
		 markDays:[],
		 kuanggong:0,
		 zaotui:0,
		 chidao:0,
		 jiaban:0,
		 shangban:0,
		 xiaban:0,
		 chidaoShow:false,
		 zaotuiShow:false,
		 renderData:[],
		 hasDate:false,
		 account:'',
	 })
	 return {data}
	 },
	 methods: {
	     onDayClick(data1){
			 let renderData=this.data.renderData
	         this.data.curDate = data1.date;
			 // console.log('111',this.data.curDate)
			 this.getData();
	     },
		 back(){
			 uni.switchTab({
			 	url: '../my/my'
			 });
		 },
		 kaoqintongji(){
			 uni.navigateTo({
			 	url: '../attendance_statistics/attendance_statistics'
			 });
		 },
		 
		 //渲染页面
		 getData(){
			 this.data.kuanggong=0;
			 this.data.chidao=0;
			 this.data.zaotui=0;
			 this.data.jiaban=0;
				http({
			 		    url: "/home/get_kaoqin",
			 		    method: "get",
			 		    data: {
			 		        word_id: this.data.account,
			 		    }
			 		    }).then((res) => {
			 				// console.log(res.data.data)
							store.commit('wuxiaoyuan/render',res.data.data)
			 				let renderData=store.state.wuxiaoyuan.res
							this.data.renderData=renderData;
							this.data.hasDate=false;
			 				// console.log(renderData)
			 				let json=[]
							//将当前年月存入vuex中
							store.commit('wuxiaoyuan/setOnday',this.data.curDate)
							// console.log('onDay',store.state.wuxiaoyuan.onDay)
			 				//遍历处理好的数据，找到当前月份的数据
			 				for(let i=0;i<renderData.length;i++){
			 					if(renderData[i].time==this.data.curDate.slice(0,7)){
			 						//对数据进行分类
			 						renderData[i].detail.forEach(v=>{
			 							let date1 = new Date(v.clock_in);
			 							let date2 = new Date(v.clock_go);
			 							let total = (date2.getTime() - date1.getTime()) / 1000 / 60 / 60;
										if(String(v.clock_in).split(" ")[0]==this.data.curDate){
											// console.log('222',String(v.clock_in).split(" ")[0])
											this.data.shangban=String(v.clock_in).split(" ")[1].slice(0,5);
											this.data.chidaoShow=Number(this.data.shangban.slice(0,2))>9?true:false
											if(Number(this.data.shangban.slice(0,2))==9){
												if(Number(this.data.shangban.slice(3,5))>10){
													this.data.chidaoShow=true
												}
											}
											this.data.xiaban=String(v.clock_go).split(" ")[1].slice(0,5);
											this.data.zaotuiShow=Number(this.data.xiaban.slice(0,2))<18?true:false
											this.data.hasDate=true;
											// console.log(this.data.shangban)
										}
			 							if(total>8){
			 								this.data.jiaban=String(total).split(".")[1].slice(0,1)>5?total-8+1:Math.floor(total-8)
			 							}
			 							if(v.status=='旷工'){
			 								this.data.kuanggong++;
			 							}else if(v.status=='迟到'){ 
			 								this.data.chidao++;
			 							}else if(v.status=='早退'){
			 								this.data.zaotui++ ;
			 							}
			 						})
			 					}
								
			 				}
							// console.log(this.data.hasDate)
							if(!this.data.hasDate){
											 this.data.shangban='';
											 this.data.xiaban='';
											 this.data.chidaoShow=false
											 this.data.zaotuiShow=false
											uni.showModal({
												content: '今天你没有打卡记录哦',
																		showCancel: false,
																		confirmText:"确定",
																		success: function (res) {
																			if (res.confirm) {
																				console.log('用户点击确定');
																			} else if (res.cancel) {
																				console.log('用户点击取消');
																			}
																		}
											});
											
							} 
			 				json.push({kuanggong:this.data.kuanggong,chidao:this.data.chidao,jiaban:this.data.jiaban});
			 				store.commit('wuxiaoyuan/kaoqin',json)
			 				// console.log(store.state.wuxiaoyuan.kaoqinJson[0].kuanggong)
			 					// console.log(this.data.kuanggong,this.data.chidao,this.data.zaotui,this.data.jiaban)
			 					// console.log(this.data.jiaban=(total-8).split('.')[1])
			 				});
			 }
	 },
	 onShow() {
		this.data.account=store.state.liujinchang.user.work_id
	 	let today = this.$refs.ren.getToday().date;
		// console.log(today)
	 	this.data.curDate = today;
	 	this.data.markDays.push(today);
		// console.log(this.data.markDays)
		this.getData();
		}
 }	 
 </script>
<!-- <script src="../../static/font/iconfont.js"></script>; -->
<style lang="less">
	@import url("~@/static/font/iconfont.css");
page{
	background: rgb(242,242,242);
}
.title{
	height: 40rpx;
	background: #FFF;
	position: relative;
	text{
		position: absolute;
		top: 70rpx;
		margin-left: 20rpx;
	}
}
.guize{
	padding: 25rpx;
	background-color: #FFFFFF;
	.time{
		color: rgb(204,204,204);
		font-size: 26rpx;
}
}
.daka{
	width: 25rpx;
	height: 25rpx;
	background: rgb(204,204,204);
	// display: inline-block;
	border-radius: 12.5rpx;
	margin-top: -50rpx;
	margin-right: 20rpx;
}
.shangban,.xiaban{
	display: flex;
	align-items: center;
	margin: 20rpx 0;
	.btn2{
		color: rgb(45,140,240);
		height: 60rpx;
		font-size: 30rpx;
		line-height: 60rpx;
		padding: 0 25rpx;
		border: 1rpx solid rgb(45,140,240);
		border-radius: 10rpx;
		position: absolute;
		right: 20rpx;
		// margin-left: 10rpx;
	}
	view{
		text{
			font-size: 36rpx;
		}
		view{
			display: flex;
			text{
				font-size: 32rpx;
				height: 40rpx;
				line-height: 40rpx;
				display: inline-block;
			}
			.btn1{
				color: red;
				height: 40rpx;
				font-size: 24rpx;
				line-height: 35rpx;
				padding: 0 15rpx;
				border: 1rpx solid red;
				border-radius: 40rpx;
				margin-left: 10rpx;
			}
		}
	}
}
.tongji{
	margin-top: 25rpx;
	background-color: #FFFFFF;
	padding:0 25rpx;
	position: relative;
	.footer{
		padding: 25rpx 0;
		display: inline-block;
	}
	.iconfont{
		position: absolute;
		right: 25rpx;
	}
	.type{
		display: flex;
		justify-content: space-around;
		text-align: center;
		text{
			display: block;
		}
		text:first-child{
			font-size: 28rpx;
			color: rgb(102,102,102);
		}
		text:last-child{
			font-size: 50rpx;
			padding: 25rpx;
		}
	}
}
</style>
